<template>
    <div class='app'>
        <h1>{{msg}},学生的姓名是：{{studentName}}</h1>
        <!-- 通过父组件给子组件传递函数类型的props，实现：子给父传递数据 -->
        <School :getSchoolName="getSchoolName"/>

        <!-- 通过父组件给子组件绑定一个自定义事件，实现：子给父传递数据(第一种写法，使用v-on或@) -->
        <!-- <Student v-on:atguigu="getStudentName" @demo="m1"/> -->

        <!-- 通过父组件给子组件绑定一个自定义事件，实现：子给父传递数据(第二种写法，使用ref) -->
        <!-- 组件上想用原生事件，得加native -->
        <Student ref="student" @click.native = "show"/> 
    </div>

</template>

<script>
import School from './components/School'
import Student from './components/Student.vue'
export default {
    name:'App',
    components:{Student,School},
    data(){
        return{
            msg:'你好啊',
            studentName:''
        }
    },
    methods:{
        getSchoolName(name){
            console.log('App收到了学校名：',name)
        },
        // getStudentName(name,...params)
        getStudentName(name){
            // 传输多个参数时，可以用params数组来接收
            console.log('App收到了学生名：',name)
            // this.studentName = name
        },
        m1(){
            console.log('demo事件被触发了')
        },
        show(){
            alert('哈哈哈')
        }
    },
    mounted(){
        // this.$refs.student.$on('atguigu',this.getStudentName)
    }
    
}
</script>

<style scoped>
    .app{
        background-color: gray;
    }
</style>